<template>
    <view-box class="FwsqListDetail" bodyPaddingTop="0" bodyPaddingBottom="0">
        <x-header >{{titles}}</x-header>
        <div class="xqbox">
            <flexbox orient="vertical" :gutter="5">
                <flexbox-item v-for="i in 6 " :key="i">
                    <div class="box">
                        <div class="jd">进度：审核中</div>
                        <div class="sj">时间：2018-6-28</div>
                    </div>
                </flexbox-item>

            </flexbox>
        </div>
        <group >
            <cell v-for="i in 8 " :key="i">
                <span slot="title">字段详情</span>
                <slot>{{i}}</slot>
                <!-- <span slot="value" ></span> -->
            </cell>
        </group>
        <tabbar>
            <tabbar-item class="pass">
                <span slot="label" class="passtext">通过</span>
            </tabbar-item>
            <tabbar-item class="back">
                <span slot="label" class="passtext">退回</span>
            </tabbar-item>
            
        </tabbar>
    </view-box>
</template>
  <script>
import {
    ViewBox,
    XHeader,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Flexbox,
    FlexboxItem,
    Tabbar,
    TabbarItem
} from "vux";
// import {
//   mapState, mapMutations, mapGetters, mapActions
// } from "vuex";
export default {
    name: "FwsqListDetail",
    components: {
        ViewBox,
        XHeader,
        Cell,
        CellBox,
        CellFormPreview,
        Group,
        Flexbox,
        FlexboxItem,
        Tabbar,
        TabbarItem
    },
    data() {
        return {
            titles: "1",
            results: [1, 2, 34, 5, 6]
        };
    },
    computed: {},
    created() {
        if (this.$route.query.id !== undefined) {
            this.titles = this.$route.query.id;
        }
    },
    mounted() {},
    methods: {
        onFocus() {},
        onCancel() {},
        onSubmit(keytext) {
            this.$refs.search.setBlur();
            this.$vux.toast.show({
                type: "text",
                position: "top",
                text: keytext
            });
            this.results = [1, 2, 3];
        },
        onChange(keytext) {
            this.results = [11, 22, 33];
        }
    }
};
</script>
<style lang="less">
.FwsqListDetail {
    background-color: #fff;
    font-size: 16px;
    .xqbox {
        margin: 10px;
        padding: 5px;
        background-color: #f9fafb;
        box-shadow: #666 0px 0px 8px;
        border-radius: 5px;
    }
    .jd {
        width: 50%;
        float: left;
        //padding-left: 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
    }
    .box {
        padding: 10px;
    }
    .sj {
        width: 50%;
        float: left;
        text-align: right;
        color: #a6a7a8;
        //padding-right: 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
    }
    .pass{
        background-color: #2dade1;
        color: #fff;
    }
    .passtext{
        color: #fff;
    }
    .back{
        background-color: #f72548;
        color: #fff;
        height: 10px;;
    }
}
</style>